<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的发布 - 邻里</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            max-width: 500px;
            margin: 0 auto;
            padding: 0 10px 70px;
        }
        
        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            padding: 15px;
            border-radius: 0 0 15px 15px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(78, 84, 200, 0.2);
            position: relative;
        }
        
        .header-title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .header-icon {
            color: white;
            font-size: 1.2rem;
            text-decoration: none;
        }

        /* 发布状态标签 */
        .status-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            background-color: rgba(255, 255, 255, 0.2);
        }

        .status-available {
            background-color: rgba(46, 204, 113, 0.2);
            color: #27ae60;
        }

        .status-borrowed {
            background-color: rgba(255, 159, 64, 0.2);
            color: #e67e22;
        }

        /* 物品主图区域 */
        .item-gallery {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .main-image {
            width: 100%;
            height: 250px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 4rem;
        }

        .image-thumbnails {
            display: flex;
            gap: 8px;
            padding: 10px;
            overflow-x: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .image-thumbnails::-webkit-scrollbar {
            display: none;
        }

        .thumbnail-item {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background-color: #eee;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #bbb;
            font-size: 1.2rem;
            border: 2px solid transparent;
        }

        .thumbnail-item.active {
            border-color: #4e54c8;
            color: #4e54c8;
        }

        /* 物品基本信息 */
        .item-base-info {
            background-color: white;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .item-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .item-price-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f1f1f1;
        }

        .item-price {
            color: #ff6b6b;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .price-unit {
            font-size: 1rem;
            font-weight: normal;
            margin-left: 5px;
        }

        .item-views {
            color: #888;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
        }

        .item-views i {
            margin-right: 5px;
        }

        .info-row {
            display: flex;
            margin-bottom: 12px;
            font-size: 0.95rem;
        }

        .info-label {
            width: 70px;
            color: #888;
        }

        .info-value {
            color: #333;
            flex: 1;
        }

        /* 物品详情描述 */
        .item-description {
            background-color: white;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .section-subtitle {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: #333;
            display: flex;
            align-items: center;
        }

        .section-subtitle i {
            color: #4e54c8;
            margin-right: 8px;
            font-size: 1rem;
        }

        .desc-content {
            color: #666;
            line-height: 1.7;
            font-size: 0.95rem;
            white-space: pre-line;
        }

        /* 借用记录区域 */
        .borrow-record {
            background-color: white;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .record-list {
            margin-top: 12px;
        }

        .record-item {
            padding: 12px 0;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .record-item:last-child {
            border-bottom: none;
        }

        .record-info {
            flex: 1;
        }

        .record-user {
            font-weight: 500;
            margin-bottom: 3px;
        }

        .record-time {
            font-size: 0.85rem;
            color: #888;
        }

        .record-status {
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.8rem;
        }

        .record-completed {
            background-color: rgba(46, 204, 113, 0.15);
            color: #27ae60;
        }

        .record-borrowing {
            background-color: rgba(255, 159, 64, 0.15);
            color: #e67e22;
        }

        /* 底部操作栏 */
        .action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            display: flex;
            gap: 10px;
            padding: 12px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 0 auto;
        }

        .action-btn {
            flex: 1;
            padding: 12px 0;
            border-radius: 10px;
            border: none;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .btn-secondary {
            background-color: #f5f7fa;
            color: #333;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
        }

        /* 底部导航（复用原样式） */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 0 auto;
        }
        
        .nav-item {
            text-align: center;
            color: #888;
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        .nav-item.active {
            color: #4e54c8;
        }
        
        .nav-item i {
            font-size: 1.2rem;
            display: block;
            margin-bottom: 4px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <a href="javascript:history.back()" class="header-icon"><i class="fas fa-arrow-left"></i></a>
        <div class="header-title">我的发布详情</div>
        <div class="status-tag status-available">可借用</div>
    </div>

    <!-- 物品图片画廊 -->
    <div class="item-gallery">
        <div class="main-image"><i class="fas fa-camera"></i></div>
        <div class="image-thumbnails">
            <div class="thumbnail-item active"><i class="fas fa-image"></i></div>
            <div class="thumbnail-item"><i class="fas fa-image"></i></div>
            <div class="thumbnail-item"><i class="fas fa-image"></i></div>
            <div class="thumbnail-item"><i class="fas fa-image"></i></div>
            <div class="thumbnail-item"><i class="fas fa-plus"></i></div>
        </div>
    </div>

    <!-- 物品基本信息 -->
    <div class="item-base-info">
        <div class="item-title">专业单反相机 佳能EOS R6 几乎全新</div>
        <div class="item-price-row">
            <div class="item-price">50<span class="price-unit">积分/天</span></div>
            <div class="item-views"><i class="fas fa-eye"></i> 128人看过</div>
        </div>
        <div class="info-row">
            <div class="info-label">物品分类</div>
            <div class="info-value">摄影器材</div>
        </div>
        <div class="info-row">
            <div class="info-label">新旧程度</div>
            <div class="info-value">99新（仅使用3次）</div>
        </div>
        <div class="info-row">
            <div class="info-label">存放位置</div>
            <div class="info-value">8号楼 2单元 1501</div>
        </div>
        <div class="info-row">
            <div class="info-label">发布时间</div>
            <div class="info-value">2024-08-15 09:23</div>
        </div>
        <div class="info-row">
            <div class="info-label">联系方式</div>
            <div class="info-value">
                <button style="border: none; background: none; color: #4e54c8; cursor: pointer;">
                    <i class="fas fa-phone"></i> 查看电话
                </button>
            </div>
        </div>
    </div>

    <!-- 物品详情描述 -->
    <div class="item-description">
        <div class="section-subtitle"><i class="fas fa-file-alt"></i> 物品描述</div>
        <div class="desc-content">
            佳能EOS R6全画幅微单相机，2024年3月购入，仅外出拍摄3次，机身无划痕无磕碰，几乎全新。
            配件包含：
            1. 原装电池2块
            2. 原装充电器
            3. RF 24-105mm F4 L IS USM镜头
            4. 相机包
            5. 64G高速SD卡
            6. 清洁套装
            
            支持全高清视频拍摄，对焦迅速，适合旅行、人像、风光等多种场景。
            借用需押身份证或等价物品，归还时需检查设备完好性。
        </div>
    </div>

    <!-- 借用记录 -->
    <div class="borrow-record">
        <div class="section-subtitle"><i class="fas fa-history"></i> 借用记录</div>
        <div class="record-list">
            <div class="record-item">
                <div class="record-info">
                    <div class="record-user">张邻居（3号楼）</div>
                    <div class="record-time">2024-08-20 至 2024-08-22</div>
                </div>
                <div class="record-status record-completed">已归还</div>
            </div>
            <div class="record-item">
                <div class="record-info">
                    <div class="record-user">李同学（12号楼）</div>
                    <div class="record-time">2024-09-05 至 2024-09-07</div>
                </div>
                <div class="record-status record-borrowing">借用中</div>
            </div>
        </div>
    </div>

    <!-- 底部操作栏 - 已移除咨询按钮 -->
    <div class="action-bar">
        <button class="action-btn btn-secondary">
            <i class="fas fa-edit"></i> 编辑
        </button>
        <button class="action-btn btn-primary">
            <i class="fas fa-ban"></i> 下架
        </button>
    </div>

    <script>
        // 图片缩略图切换功能
        const thumbnails = document.querySelectorAll('.thumbnail-item');
        const mainImage = document.querySelector('.main-image i');
        const icons = ['fa-camera', 'fa-camera-retro', 'fa-image', 'fa-video']; // 模拟不同图片的图标

        thumbnails.forEach((thumb, index) => {
            // 跳过"添加图片"的缩略图
            if (index >= icons.length) return;
            
            thumb.addEventListener('click', () => {
                // 移除所有激活状态
                thumbnails.forEach(t => t.classList.remove('active'));
                // 添加当前激活状态
                thumb.classList.add('active');
                // 更新主图图标
                mainImage.className = `fas ${icons[index]}`;
            });
        });

        // 模拟电话查看功能
        const phoneBtn = document.querySelector('.info-value button');
        phoneBtn.addEventListener('click', () => {
            alert('联系电话：138****5678');
        });

        // 底部按钮功能
        const editBtn = document.querySelector('.action-btn:first-child');
        const offlineBtn = document.querySelector('.action-btn:last-child');

        editBtn.addEventListener('click', () => {
            // 跳转到编辑页面
            alert('跳转到编辑页面');
        });

        offlineBtn.addEventListener('click', () => {
            if (confirm('确定要下架该物品吗？')) {
                alert('物品已下架');
                // 更新状态标签
                document.querySelector('.status-tag').className = 'status-tag status-offline';
                document.querySelector('.status-tag').textContent = '已下架';
            }
        });
    </script>
</body>
</html>
